import React, {Component} from 'react';
import {graphql} from 'react-apollo';
import {Meteor} from 'meteor/meteor';
import {createContainer} from 'meteor/react-meteor-data';
import {LoginButtons} from 'meteor/okgrow:accounts-ui-react';
import gql from 'graphql-tag';
import s from './Home.css'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; //就是它
import RaisedButton from 'material-ui/RaisedButton';
import {FormattedDate, FormattedRelative, FormattedPlural} from 'react-intl';

import Header from '../../components/Header'
import LanguageSwitcher from '../../components/LanguageSwitcher'

const Home = ({userId, currentUser, refetch}) => (
    <div>
        <LoginButtons/>
        <FormattedRelative value={Date.now()}/>
        <Header />
        <MuiThemeProvider>
            <RaisedButton label="Default"/>
        </MuiThemeProvider>
        {userId
            ? (
                <div >
                    <pre>{JSON.stringify(currentUser, null, 2)}</pre>
                    <button onClick={() => refetch()}>Refetch!</button>
                </div>
            )
            : 'Please log in!'}
    </div>
);

Home.propTypes = {
    userId: React.PropTypes.string.isRequired,
    currentUser: React.PropTypes.object,
    refetch: React.PropTypes.func
};

const GET_USER_DATA = gql `
  query ($id: String!) {
    user(id: $id) {
      emails {
        address
        verified
      }
      username
      randomString
      _id
    }
  }
`;

const withData = graphql(GET_USER_DATA, {
    props: ({
        data: {
            error,
            loading,
            user,
            refetch
        }
    }) => {
        if (loading)
            return {userLoading: true};
        if (error)
            return {hasErrors: true};
        return {currentUser: user, refetch};
    },
    options: (ownProps) => ({
        variables: {
            id: ownProps.userId
        }
    })
});



const HomeWithData = withData(Home);

// This container brings in Tracker-enabled Meteor data
const HomeWithUserId = createContainer(() => {
    return {
        userId: Meteor.userId() || ''
    };
}, HomeWithData);

export default HomeWithUserId;
